<template>
  <div class="login">
    <div class="home-button" @click="handleGoHome">
      <i class="iconfont icon-shouye201"></i>返回首页
    </div>
    <div class="login-form">
      <img src="@/static/img/logo.png" alt="" />
      <div class="login-title">
        <h3>登录</h3>
        <span>还没有帐号？<a href="javascript:;">立即注册</a></span>
      </div>
      <div class="login-error" v-show="isLoginError">
        <el-alert title="用户名或密码错误" type="error" show-icon> </el-alert>
      </div>
      <div
        class="login-input"
        :class="inputUsername.trim().length == 0 && isLogin ? 'active' : ''"
      >
        <input
          type="text"
          placeholder="请输入用户名/电子邮箱"
          v-model="inputUsername"
        />
        <i class="iconfont icon-yonghu"></i>
      </div>
      <div
        class="login-input"
        :class="inputPassword.trim().length == 0 && isLogin ? 'active' : ''"
      >
        <input
          :type="isShowPassword ? 'text' : 'password'"
          placeholder="请输入登录密码"
          v-model="inputPassword"
        />
        <i class="iconfont icon-jiesuo"></i>
        <i
          class="iconfont icon-eye-fill"
          v-if="isShowPassword"
          @click="isShowPassword = !isShowPassword"
        ></i>
        <i
          class="iconfont icon-eyeclose-fill"
          v-else
          @click="isShowPassword = !isShowPassword"
        ></i>
      </div>
      <div class="login-remember">
        <span
          ><input
            type="checkbox"
            name=""
            id=""
            v-model="isRemember"
          />记住我的登录状态</span
        >
        <span><a href="javascript:;">忘记密码？</a></span>
      </div>
      <div class="login-button" @click="handleLogin">登录</div>
    </div>
    <div class="login-footer">
      <div class="foot-content">
        <ul>
          <li><a href="">线稿</a></li>
          <li><a href="">留言板</a></li>
          <li><a href="">本站地图</a></li>
          <li><a href="">捐助萌绘</a></li>
          <li><a href="">APP下载</a></li>
        </ul>
        <p>仿萌绘，仅供展示，无任何商业用途！</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default {
  name: "login",
  head(){
    return {
      title: this.headTitle,
    }
  },
  data() {
    return {
      isShowPassword: false,
      inputUsername: "admin",
      inputPassword: "123456",
      isLogin: false,
      isRemember: false,
      isLoginError: false,
    };
  },
  computed:{
    ...mapState(['headTitle'])
  },
  methods: {
    ...mapMutations(["getUserInfo"]),
    handleGoHome() {
      this.$router.push("/");
    },
    async handleLogin() {
      this.isLogin = true;
      if (
        this.inputUsername.trim().length > 0 &&
        this.inputPassword.trim().length > 0
      ) {
        const res = await this.$api.getLogin({
          username: this.inputUsername,
          password: this.inputPassword,
        });
        if (res.code != 200) {
          return (this.isLoginError = true);
        }
        // console.log(this.isRemember);
        if (this.isRemember) {
          // 存储一周时间
          this.$cookies.set("userInfo", res.data, { maxAge: 60 * 60 * 24 *7 });
        } else {
          // 存储会话时间
          this.$cookies.set("userInfo", res.data);
        }
        this.getUserInfo(this);
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and (max-width: 768px) {
  .home-button {
    display: none !important;
  }
}
.login {
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  .home-button {
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 30px;
    display: inline-block;
    color: #fff;
    padding: 9px 20px;
    border-radius: 4px;
    background: #0088cc;
    i {
      margin-right: 5px;
    }
    &:hover {
      background: #4871ec;
    }
  }
  .login-form {
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    img {
      height: 40px;
      margin-bottom: 40px;
    }
    > div {
      width: 360px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      font-size: 14px;
      i {
        position: absolute;
      }
      > input {
        width: 100%;
        height: 40px;
        border: 1px solid #eee;
        padding: 9px 15px 9px 42px;
        box-sizing: border-box;
        border-radius: 4px;
        outline: none;
        &:focus {
          border-color: #3361ea;
          + i {
            color: #3361ea;
          }
        }
      }
    }
    .login-title {
      margin-bottom: 30px;
      h3 {
        font-size: 16px;
      }
      span {
        a {
          color: #0088cc;
          &:hover {
            color: #3361ed;
          }
        }
      }
    }
    .login-error {
      margin-bottom: 20px;
      /deep/div {
        height: 46px;
        line-height: 46px;
        .el-alert__title {
          font-weight: bold;
        }
        .el-alert__closebtn {
          top: 18px;
        }
      }
    }
    .login-input {
      margin-bottom: 20px;
      i {
        width: 46px;
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        text-align: center;
      }
      .icon-eye-fill,
      .icon-eyeclose-fill {
        cursor: pointer;
        font-size: 18px;
        right: 0;
        color: #ccc;
        &:hover {
          color: #3361ea;
        }
      }
    }
    .login-input.active {
      input {
        border-color: red;
      }
      input::-webkit-input-placeholder {
        color: red;
      }
      .icon-yonghu,
      .icon-jiesuo {
        color: red;
      }
    }
    .login-remember {
      margin-bottom: 20px;
      span {
        color: #262626;
        display: flex;
        align-items: center;
        input {
          margin-right: 10px;
        }
        a {
          font-weight: bold;
          color: #0088cc;
          &:hover {
            color: #3361ed;
          }
        }
      }
    }
    .login-button {
      padding: 12px 20px;
      box-sizing: border-box;
      color: #fff;
      border-radius: 4px;
      background: #0088cc;
      justify-content: center;
      line-height: 16px;
      cursor: pointer;
      &:hover {
        background: #1a94d1;
      }
    }
  }
  .login-footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
    .foot-content {
      padding: 30px 10px;
      box-sizing: border-box;
      margin: 0 auto;
      text-align: center;
      ul {
        margin-bottom: 12px;
        li {
          height: 10px;
          line-height: 10px;
          display: inline-block;
          padding: 0 10px;
          border-left: 2px solid #ffffffb3;
          font-size: 13px;
          &:nth-child(1) {
            border-left: 0;
            padding-left: 0;
          }
          a {
            color: #fff;
            &:hover {
              color: #fff;
            }
          }
        }
      }
      p {
        font-size: 13px;
        color: #fff;
      }
    }
  }
}
</style>